<template>
  <div id="app">
    <h1>我是App组件</h1>
    <!-- 1.声明式导航 
      <router-link>:
        to属性:对应跳转的路径
        tag属性:将<router-link>标签,渲染成指定的标签,默认渲染为<a></a>标签
        replace属性:相当于调用了history.replaceState({},"","url")方法,使得网页的后退失效
        router-link-active:组件唤醒时自动添加的class,这个默认class可以通过linkActiveClass属性在router里面配置
     -->
    <router-link to="/home" replace>首页</router-link>
    <router-link to="/about" replace>关于</router-link>
    <!-- 
      动态路由:
        1.需要在路由(routes)里面的path后面,接一个  /:user
        2.跳转到定义了动态路由的组件时,需要在地址后面跟上参数,以确保路由正确匹配
        3.一般来说后面的参数需要使用v-bind绑定上去
     -->
    <router-link :to="'/user/' + uname" replace>用户</router-link>
    <router-link :to="{ path: '/profile', query: { id: 111 } }"
      >档案</router-link
    >

    <!-- 
      关于$router和$route的区别:
        1.$router对象是vue-router在定义时new出来的全局对象,它已经挂载到了Vue实例的身上了,在任何组件中都可以访问到
        2.$route对象是当前处于活跃状态的组件的路由实例对象,它里面记载了params(动态路由传参),query(地址栏传参),命名组件(name),等参数信息
        3.这俩个对象非常重要
     -->

    <!-- 2.函数式导航
      通过$router对象:
        push(url)
        replace(url)
    -->
    <!-- <button @click="toHome">首页</button>
    <button @click="toAbout">关于</button> -->

    <!-- 使组件缓存起来 -->
    <!-- 有<keep-alive>标签包裹的组件会有activated和deactivated俩个回调函数,分别为组件激活时触发和失活时触发,因为包裹了keep-alive组件,所以组件并不会频繁的创建和销毁(组件的生命周期被调用一次后会失效) -->
    <keep-alive include="home" exclude="user">  
      <!-- 组件占位符 -->
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
export default {
  //1.name字段目前可以配合keep-alive的include和exclude使用
  name: "App",
  data() {
    return {
      uname: "spa",
    };
  },
  methods: {
    toHome() {
      this.$router.push("/home");
    },
    toAbout() {
      this.$router.push("/about");
    },
  },
};
</script>

<style>
/* 测试活跃状态的组件样式 */
.router-link-active {
  color: red;
}
.active {
  color: blue;
}
</style>
